游戏增长分析

<!-- 宠物管理页面 -->

<template >
  <el-card style="border-radius: 5px">
    <template #header>
      <div class="card-header">
        <h3>玩家分析</h3>
      </div>
    </template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="增长" name="first">
        <el-tabs
          v-model="activeChildName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="注册人数" name="first">
            <!-- 下拉框查看数据 -->
            <div class="select-data">
              <el-dropdown
                @command="handleCommand"
                style="line-height: 30px; margin-left: 30px"
              >
                <span class="el-dropdown-link">
                  最近30天<el-icon class="el-icon--right"
                    ><arrow-down
                  /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="a">最近15天</el-dropdown-item>
                    <el-dropdown-item command="b">最近30天</el-dropdown-item>
                    <el-dropdown-item command="c">最近60天</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <!-- 平滑折线图 -->
            <div style="flex: 0 1 40%">
              <e-charts class="chart" :option="lineChart" width="40%" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="新增人数" name="add">111</el-tab-pane>
          <el-tab-pane label="活跃人数" name="third">Role</el-tab-pane>
          <el-tab-pane label="累积人数" name="fourth">Task</el-tab-pane>
        </el-tabs></el-tab-pane
      >
      <el-tab-pane label="留存" name="second">Config</el-tab-pane>
      <el-tab-pane label="属性" name="third">Role</el-tab-pane>
      <!-- 时间选择器 -->
      <div class="time-selector">
        <el-date-picker
          v-model="value"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
          :size="size"
        />
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" height="250" style="width: 100%">
        <el-table-column prop="date" label="时间" width="180" />
        <el-table-column prop="peopleNum" label="注册人数" width="180" />
        <el-table-column prop="newPeopleNum" label="新增人数" width="180" />
        <el-table-column prop="activePeopleNum" label="活跃人数" width="180" />
        <el-table-column
          prop="cumulativePeopleNum"
          label="累计人数"
          width="180"
        />
      </el-table>
    </el-tabs>
  </el-card>
</template>

<style scoped>
.el-menu-item {
  margin-right: 40px;
}
::v-deep(.el-tabs__active-bar) {
  background-color: rgb(44, 182, 156); /* 将激活状态下的下划线颜色设置为蓝色 */
}
.el-tabs__item,
.el-tabs__item:hover,
::v-deep(.el-tabs__item),
::v-deep(.el-tabs__item:hover),
::v-deep(.el-tabs__item) {
  color: rgb(44, 182, 156);
}
::v-deep(.el-tabs__item.is-active) {
  color: #1a3b32;
}

.select-data {
  width: 100%;
  height: 32px;
  background-color: #f4f5f9;
}
.echarts {
  margin: auto;
  border-radius: 8px;
  margin-top: 20px;
  width: 97%;
  background-color: white;
  height: 300px;
}
#echarts_con {
  width: 100%;
  height: 100%;
}
.time-selector {
  margin-bottom: 20px;
  background-color: #f4f5f9;
}
</style>
<script setup>
import { ref } from "vue";
const activeName = ref("first");
const activeChildName = ref("first");
// 下拉菜单相关方法
const handleCommand = (command) => {
  alert(`click on item ${command}`);
};
// 平滑折线图
const lineChart = ref({
  color: " rgb(44, 182, 156)",
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    axisLine: {
      lineStyle: {
        color: "#1177b0", // 设置颜色为绿色
      },
    },
    type: "category",
    data: ["9.21", "9.22", "9.23", "9.24", "9.25", "9.26", "9.27"],
  },
  yAxis: {
    axisLine: {
      lineStyle: {
        color: "#1177b0", // 设置颜色为绿色
      },
    },
    type: "value",
  },
  series: [
    {
      data: [23, 33, 27, 40, 50, 66, 54],
      type: "line",
      smooth: true,
    },
  ],
});
const size = (ref < "default") | "large" | ("small" > "default");

const value = ref("");

const shortcuts = [
  {
    text: "一周前",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "一月前",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "三月前",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

// 表格数据类型
const tableData = [
  {
    date: "8.2",
    peopleNum: 8,
    newPeopleNum: 2,
    activePeopleNum: 6,
    cumulativePeopleNum: 3290,
  },
  {
    date: "8.1",
    peopleNum: 32,
    newPeopleNum: 5,
    activePeopleNum: 27,
    cumulativePeopleNum: 3293,
  },
];
</script>